<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./图标字体/css/all.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./图标字体/iconfont.css">
</head>
<body>
<div class="top-bar">
    <div class="nav w">
        <ul class="left-wrapper">
            <li class="nav-list1"><a href="">小米商城</a></li>
            <li class="line">|</li>
            <li class="nav-list1"><a href="">MIUI</a></li>
            <li class="line">|</li>
            <li class="nav-list1"><a href="">loT</a></li>
            <li class="line">|</li>
            <li class="nav-list1"><a href="">云服务</a></li>
            <li class="line">|</li>
            <li class="nav-list1"><a href="">天星数科</a></li>
            <li class="line">|</li>
            <li class="nav-list1"><a href="">有品</a></li>
            <li class="line">|</li>
            <li class="nav-list1"><a href="">小爱开发平台</a></li>
            <li class="line">|</li>
            <li class="nav-list1"><a href="">企业团购</a></li>
            <li class="line">|</li>
            <li class="nav-list1"><a href="">资质证照</a></li>
            <li class="line">|</li>
            <li class="nav-list1"><a href="">协议规则</a></li>
            <li class="line">|</li>
            <li class="nav-list1 app">
                <a class="downloadapp" href="">下载app</a>
                <div class="appQR">
                    <img src="./source/download.png" alt="小米商城" class="appQRimg">
                    小米商城APP
                </div>
            </li>
            <li class="line">|</li>
            <li class="nav-list1"><a href="">智能生活</a></li>
            <li class="line">|</li>
            <li class="nav-list1"><a href="">Select Location</a></li>
        </ul>
        <ul class="right-wraper">
            <li class="nav-list1"><a href="">登录</a></li>
            <li class="line">|</li>
            <li class="nav-list1"><a href="">注册</a></li>
            <li class="line">|</li>
            <li class="nav-list1 nav-list2"><a href="">消息通知</a></li>
            <div class="shopping"><strong><i class="iconfont shoppingic" >&#xe64e;购物车（0）</i></strong></div>
        </ul>
    </div>
</div>
<div class="container-wrapper">
    <div class="container w">
        <div class="logo">
            <a href="https://kongmy.gitee.io/html/xiaomi/xiaomi.html" class="logo-a"></a>
        </div>
        <div class="container-right clearfix">
            <div class="search-wrapper" tabindex = "1">
                <input type="text" class="search-inp">
                <button class="search-btn">
                    <i class="iconfont searchico">&#xe63c;</i>
                </button>
            </div>
            <ul class="container-right-nav ">
                <li class="all-goods-li">
                    <a href="" class="all-goods"><span class="text">全部商品分类</span></a>
                    <div class="all-goods-nav">
                        <ul >
                            <li class="all-goods-list">
                                <a href="#">手机<i class="fas fa-angle-right"></i></a>
                            </li>
                            <li class="all-goods-list">
                                <a href="#">电视<i class="fas fa-angle-right"></i></a>
                            </li>
                            <li class="all-goods-list">
                                <a href="#">笔记本 平板<i class="fas fa-angle-right"></i></a>
                            </li>
                            <li class="all-goods-list">
                                <a href="#">家电<i class="fas fa-angle-right"></i></a>
                            </li>
                            <li class="all-goods-list">
                                <a href="#">出行 穿戴<i class="fas fa-angle-right"></i></a>
                            </li>
                            <li class="all-goods-list">
                                <a href="#">智能 路由器<i class="fas fa-angle-right"></i></a>
                            </li>
                            <li class="all-goods-list">
                                <a href="#">电源 配件<i class="fas fa-angle-right"></i></a>
                            </li>
                            <li class="all-goods-list">
                                <a href="#">健康 儿童<i class="fas fa-angle-right"></i></a>
                            </li>
                            <li class="all-goods-list">
                                <a href="#">耳机 音响<i class="fas fa-angle-right"></i></a>
                            </li>
                            <li class="all-goods-list">
                                <a href="#">生活 箱包<i class="fas fa-angle-right"></i></a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="container-right-list ">
                    <a href=""><span class="text">Xiaomi手机</span></a></li>
                <li class="container-right-list"><a href=""><span class="text">Redmi红米</span></a></li>
                <li class="container-right-list"><a href=""><span class="text">电视</span></a></li>
                <li class="container-right-list"><a href=""><span class="text">笔记本</span></a></li>
                <li class="container-right-list"><a href=""><span class="text">平板</span></a></li>
                <li class="container-right-list"><a href=""><span class="text">家电</span></a></li>
                <li class="container-right-list"><a href=""><span class="text">路由器</span></a></li>
                <li class="container-right-list">
                    <a href="" class="container-right-lista">
                        <span>服务</span>
                    </a>
                </li>
                <li class="container-right-list">
                    <a href="" class="container-right-lista">
                        <span>社区</span>
                    </a>
                </li>
                <div class="menu ">
                    <ul class="listmenu w">
                        <li class="menulist">
                            <a href="#"><img src="./source/phnoe1.webp" alt="" class="phone"><span class="descripe">Xiaomi Civi<span class="price">2599元起</span></span></a>
                        </li>
                        <li class="line"></li>
                        <li class="menulist">
                            <a href="#"><img src="./source/phone2.webp" alt="" class="phone"><span class="descripe">Xiaomi MIX 4<span class="price">4199元起</span></span></a>
                        </li>
                        <li class="line"></li>
                        <li class="menulist">
                            <a href="#"><img src="./source/phone3.webp" alt="" class="phone"><span class="descripe">Xiaomi MIX FOLD<span class="price">7499元起</span></span></a>
                        </li>
                        <li class="line"></li>
                        <li class="menulist">
                            <a href="#"><img src="./source/phone4.webp" alt="" class="phone"><span class="descripe">Xiaomi 11 Ultra<span class="price">5499元起</span></span></a>
                        </li>
                        <li class="line"></li>
                        <li class="menulist">
                            <a href="#"><img src="./source/phone5.webp" alt="" class="phone"><span class="descripe">Xiaomi 11 PRO<span class="price">3999元起</span></span></a>
                        </li>
                        <li class="line"></li>
                        <li class="menulist">
                            <a href="#"><img src="./source/phone6.webp" alt="" class="phone"><span class="descripe">Xiaomi 11 青春版<span class="price">1999元起</span></span></a>
                        </li>
                    </ul>
                </div>
            </ul>
        </div>
    </div>
</div>
<div class="goods-banner w">
    <a href="#"></a>
    <ul class="point">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</div>
<div class="fix-banner">
    <div class="tool-right"><a href="#" class="tr1"></a><span>手机APP</span></div>
    <div class="tool-right"><a href="#" class="tr2"></a><span>个人中心</span></div>
    <div class="tool-right"><a href="#" class="tr3"></a><span>售后服务</span></div>
    <div class="tool-right"><a href="#" class="tr4"></a><span>人工客服</span></div>
    <div class="tool-right"><a href="#" class="tr5"></a><span>购物车</span></div>
</div>
</body>
</html>